<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 商品 </el-breadcrumb-item>
                <el-breadcrumb-item>商品类型管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :model="commodityType" ref="formType" :rules="rules" label-width="100px">
                    <el-form-item label="类型名称" prop="typeName">
                        <el-input v-model="commodityType.typeName"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加类型</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" height="650" border style="width: 60%">
                <el-table-column prop="typeId" label="类型ID" width="120"> </el-table-column>
                <el-table-column prop="typeName" label="类型名称" width="250"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 编辑弹出框 -->
            <el-dialog title="编辑" :visible.sync="dialogVisible" top="30vh" width="30%" :before-close="handleClose">
                <span><el-input v-model="editInputValue"></el-input></span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitEdit">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import commodityApi from '@/api/commodity';
export default {
    name: 'baseform',
    data() {
        var checkTypeName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入类型名称'));
            } else if (value.length < 2 || value.length > 15) {
                callback(new Error('名称长度请在2-15之间'));
            } else if (!this.checkTypeName(value)) {
                callback(new Error('该类型名称已重复，请重新输入'));
            } else {
                callback();
            }
        };
        return {
            commodityType: {
                typeName: ''
            },
            editInputValue: '',
            editIndex: null,
            editObject: null,
            rules: {
                typeName: [{ validator: checkTypeName, trigger: 'blur' }]
            },
            tableData: [],
            dialogVisible: false
        };
    },
    components: {},
    created() {
        this.getAllCommodityTypes();
    },
    methods: {
        getAllCommodityTypes() {
            commodityApi.getAllCommodityTypes().then((response) => {
                var data = response.data.data;
                console.log(data);
                this.tableData = data;
            });
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // console.log(index, ' ', row);
                    let formData = new FormData();
                    formData.append('typeId', row.typeId);
                    formData.append('typeName', row.typeName);
                    commodityApi.deleteCommodityType(formData).then((response) => {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    });
                })
                .catch(() => {});
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index, ' ', row);
            this.editIndex = index;
            this.editObject = row;
            this.editInputValue = this.editObject.typeName;
            this.dialogVisible = true;
            console.log('进入编辑：', this.editInputValue, this.editObject);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    this.dialogVisible = false;
                })
                .catch((_) => {});
        },
        submitEdit() {
            console.log('表单提交：', this.editInputValue, this.editObject.typeId);
            let formData = new FormData();
            formData.append('typeId', this.editObject.typeId);
            formData.append('typeName', this.editInputValue);
            commodityApi.updateCommodityType(formData).then((response) => {
                this.$message.success('编辑成功');
                this.tableData[this.editIndex].typeName = this.editInputValue;
                this.dialogVisible = false;
            });
        },
        //提交表单
        onSubmit() {
            this.$refs.formType.validate((valid) => {
                if (valid) {
                    console.log('提交表单');
                    let formData = new FormData();
                    formData.append('typeName', this.commodityType.typeName);
                    commodityApi.addCommodityType(formData).then((response) => {
                        this.getAllCommodityTypes();
                        this.$message.success('提交成功！');
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.formType.resetFields();
        },
        //检测重复类型mc
        checkTypeName(typeName) {
            for (var i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].typeName == typeName) return false;
            }
            return true;
        }
    }
};
</script>

<style scoped>
</style>

